<template>
  <header>
    <h3>饿了么</h3>
    <div class="toppic">
        <div class="top_left">
            <img src="../assets/1.jpg" alt="">
            <div class="name">
                <p>234dwre34</p>
                <p>136****2341</p>
            </div>
        </div>
        <button>账户设置</button>
    </div>
    <div class="eathuoka">
        <div class="eathuoka_left">
            <div class="eat_left_top">
                <span>吃货卡</span>
                <span>|</span>
                <span>吃货豆：</span>
                <span>1461</span>
            </div>
            <div class="eat_left_bottom">升级超级吃货卡，每月的无门槛红包，下单5倍反吃货豆</div>
        </div>
        <div class="eathuoka_right">></div>
    </div>
  </header>
</template>

<script>
export default {

}
</script>

<style scoped>
header{
    margin: 0 auto;
    height: 25vh;
    width: 96vw;
    box-sizing: border-box;
}
h3{
    margin-left: 1vw;
}
header .toppic{
    height: 8vh;
    width: 96vw;
    display: flex;
    margin: 2vh auto;
    align-items: center;
    justify-content: space-between;
}
header .toppic .top_left{
    display: flex;
    align-items: center;
    
}
header .toppic .top_left img{
    width:15vw;
    border-radius: 50%;
    vertical-align:middle;
    margin-right: 2vw;
}
header .toppic .top_left .name p:nth-child(1){
    font-weight: 700;
}
header .toppic .top_left .name p:nth-child(2){
   font-size: 12px;
   color: gray;
}
header .toppic button{
    width: 20vw;
    height: 4vh;
    border-radius: 25px;
    background-color: transparent;
    border: 1px solid gray;

}
header .eathuoka{
    margin: 0 auto;
    background-color: rgb(36, 188, 247);
    border-radius: 5px;
    height: 10vh;
    width: 96vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    color: white;
}
header .eathuoka .eathuoka_left .eat_left_top{
    display: flex;
    align-items: center;
}
header .eathuoka .eathuoka_left .eat_left_top span{
    text-align: center;
    margin-right: 2vw;;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(1){
    font-size: 20px;
    font-style:oblique;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(2){
    font-size: 20px;
}
header .eathuoka .eathuoka_left .eat_left_top span:nth-child(4){
    font-size: 20px;
}

</style>